{# empty Twig template #}
{% block javascriptsHeader %}
    <style>
        .capaTransparente{position:absolute; height:100%; width:100%; background:#ccc; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0;}
    </style>

    <!-- multi select plugin -->
    <link rel="stylesheet" href="{{ asset('bootstrap/css/multi-select.css') }}">
    <!-- jQuery -->
    <script src="{{ asset('bootstrap/js/jquery.min.js') }}"></script>    
    <!-- Bootstrap -->
    <script src="{{ asset('bootstrap/js/bootstrap.min.js') }}"></script>    
    <script src="{{ asset('bootstrap/js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('bootstrap/js/jquery.blockUI.js') }}"></script>
    <script src="{{ asset('bootstrap/js/additional-methods.min.js') }}"></script>

    <script type='text/javascript'>
       $(document).ready(function() { 
           
           $('#selectCuotas').multiSelect({
                selectableHeader: "<div class='custom-header text-error text-center'>Debe</div>",
                selectionHeader: "<div class='custom-header text-success text-center'>A pagar</div>",
                afterSelect: function(){
                  var cuotaMonto = {{ alumno.cuota }} * $('#selectCuotas :selected').length;
                  $('#cuotaMonto').val(cuotaMonto);
                },
                afterDeselect: function(){
                  var cuotaMonto = {{ alumno.cuota }} * $('#selectCuotas :selected').length;
                  $('#cuotaMonto').val(cuotaMonto);
                }
            });
           
           $('#formulario').validate({
                rules:{
                    cuotaAlumnoCobro:{
                        required:true
                    },
                    cuotaFechaCobro:{
                        required:true
                    },
                    'cuotaPagaCobro[]':{
                        required:true
                    },
                    cuotaMontoCobro:{
                        required:true
                    }
                },
                messages: {
                    cuotaAlumnoCobro:{
                        required:function(){ 
                            return "<p class='text-error'>Campo requerido!... <i class='icon-hand-up' /></p>";
                       }
                    },
                    cuotaFechaCobro:{
                        required:function(){ 
                            return "<p class='text-error'>Campo requerido!... <i class='icon-hand-up' /></p>";
                       }
                    },
                    'cuotaPagaCobro[]':{
                        required:function(){ 
                            return "<p class='text-error'>Campo requerido!... <i class='icon-hand-down' /></p>";
                       }
                    },
                    cuotaMontoCobro:{
                        required:function(){ 
                            return "<p class='text-error'>Campo requerido!... <i class='icon-hand-up' /></p>";
                       }
                    }
                },
                submitHandler: function(form){
                    form.submit();
                },
                invalidHandler: function(){}
            });
       });
    </script>
{% endblock %}

{% block body %}
        
     <form id="formulario" name="formulario" action="{{ path('cuotas_registrar_pago', {'id': alumno.id }) }}" method="post" class='form-horizontal form-bordered form-validate'>                     
     <div id="formularioBlock">   
         <div class="control-group">
                <div class="invoice-info">
                    <div class="invoice-name text-right">
                            Pyaf
                            <p class="muted"> Cobro de cuotas </p>
                    </div>
                    <div class="invoice-from text-right">
                        <table>
                            <tr>
                                <th style="text-align: left;">Fecha:</th>
                                <td>{{ "now" | date('d / m / Y', 'America/Argentina/Buenos_Aires') }}</td>
                            </tr>
                            <tr>
                                <th style="text-align: left;">Horario: </th>
                                <td>{{ "now" | date(' H: i: s', 'America/Argentina/Buenos_Aires') }}</td>
                            </tr>
                            <tr>
                                <th style="text-align: left;">Pago #: </th>
                                <td>0-{{ alumno.id }}{{ "now" |date('d')}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="invoice-from">
                        <table>
                            <tr>
                                <th style="text-align: left;"> <strong>Promociones:</strong></th>
                                <td><span>{{ alumno.promocion }}</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <label for="textfield" class="control-label" style="padding: 15px 5px 5px;">Alumno</label>
                <div class="controls">
                    <input type="text" name="cuotaAlumnoCobro" value="{{ alumno.nombreCompleto }}" required="true" readonly="true">
                </div>
            </div>
            <div class="control-group">
                <label for="textfield" class="control-label" style="padding: 15px 5px 5px;">Fecha de cobro</label>
                <div class="controls">
                    <input type="text" name="cuotaFechaCobro" value="{{ "now" | date('d-m-Y', 'America/Argentina/Buenos_Aires') }}" required="true">
                </div>
            </div>

            <div class="control-group">
                <label for="textfield" class="control-label" style="padding: 15px 5px 5px;">Meses adeudados a pagar</label>
                <div class="controls">
                    <select name="cuotaPagaCobro[]" multiple="multiple" id="selectCuotas" required="true">
                        {% for cuota in cuotas %}
                            <option value="{{ cuota.id }}">{{ cuota.mesabono }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label for="pwfield" class="control-label" style="text-align: center;">Monto a cobrar</label>
                <div class="controls">
                    <div class="input-prepend input-append">
                        <span class="add-on">$</span>
                        <input type="text" class="span5" name="cuotaMontoCobro" id="cuotaMonto" style="text-align: right;" value="000" required="true">
                        <span class="add-on">.00</span>
                    </div>
                </div>
            </div>
        </div>     
        <div id="btnAceptar" class="hide text-center">
            <input type="submit" class="button button-basic-green" value="Continuar">
            <a href="{{ path('cuotas_list') }}" class="button button-basic">Cancelar</a>
        </div>
        <div id="btnAuxiliar" class="text-center">     
            <a class="button button-basic-blue" data-toggle="modal" href="#myModal" >Aceptar</a>
        </div>
             
        <div class="modal hide" id="myModal">
            <div class="modal-header">
                <button type="button" class="close" id="close" data-dismiss="modal">x</button>
                <h3>Confirmación Pago</h3>
            </div>
            <div class="modal-body">
                <h5>¿Desea aceptar y efectuar la operación?</h5>
                <p>Cancelar para volver al formulario de pago...</p>
            </div>
            <div class="modal-footer">
                <div class="form-actions">
                    <button class="button button-basic-blue" id="btnContinuar" data-dismiss="modal" aria-hidden="true">Aceptar</button>
                    <button class="button button-basic" id="btnCancelar" data-dismiss="modal" aria-hidden="true">Cancelar</button>
                </div>
            </div>
        </div>
    </form>

    
{% endblock %}
<script src="{{ asset('bootstrap/js/jquery.multi-select.js') }}" type="text/javascript"></script>  
{% block javaScripts %}
    <script type="text/javascript">
        $(document).ready(function (){
            $('#btnContinuar').click(function (){
                if($("#formulario").valid()){
                    $('#btnAceptar').removeClass('hide');
                    $('#btnAuxiliar').addClass('hide');
                    $('#formularioBlock').block({
                        message: "",
                        css: {   border: '0px',
                                  backgroundColor:'transparent'
                            },
                        overlayCSS:  {
                                        backgroundColor: '#008CD2',
                                        opacity:         0.1
                                    }
                    });
                };
            });
        });
    </script>
{% endblock %}